<template>
	<view class="content">
		<cu-custom style="background-color: #fff;" bgColor="bg-white" :isBack="true" >
			<!-- <block slot="backText"></block> -->
			<block slot="content">项目详情</block>
			<view slot="right"></view>
		</cu-custom>
		<view class="" v-if="imageSlider.length != 0  ">
			<swiper
				class="screen-swiper square-dot "
				:indicator-dots="true"
				:circular="true"
				:autoplay="true"
				interval="5000"
				duration="500"
				:style="[{ animation: 'show 0.2s 1' }]"
			>
				<swiper-item v-for="(item, index) in czProjectInfo.photos" :key="index">
					<image :src="item.fjdz"></image>
					<!-- <video :src="item.fjid" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type == 'video'"></video> -->
				</swiper-item>
			</swiper>
		</view>
		
		<view class="cu-item animation-slide-bottom" :style="[{ animationDelay: '0.1s' }]">
			<view class="content"><text class="">项目名称</text></view>
			<view class="action projName">
				<text class="text-grey projName">{{ czProjectInfo.projectName }}</text> 
			</view>
		</view>

		<view class="cu-item animation-slide-bottom" :style="[{ animationDelay: '0.1s' }]">
			<view class="content" style="width: 30%;">建设地址</view>
			<view class="action text-grey adressText uni-ellipsis">
				{{ czProjectInfo.buildLocation }}
			</view>
		</view>
		
	   <view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.1s'}]">
			<view class="content">
			  <text class="">
			 项目起止年限  </text>
		  </view>
		   <view class="action">
			<text class="text-grey">
				　{{czProjectInfo.ksnd}}-{{czProjectInfo.jsnd}}
				</text>
	   </view>
	   </view>	        
	 <view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.1s'}]">
			<view class="content">
			<text class="">
			 总投资</text>
			</view>
			<view class="action">
			<text class="text-grey">　{{czProjectInfo.totalInvestment}}亿元</text>
		 </view>
		 </view>
	<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.1s'}]" v-show="false">
			<view class="content">
			  <text class="">
			 至上年底累计投资</text>
			</view>
			<view class="action">
			<text class="text-grey">　{{czProjectInfo.cumulativeInvestment}}亿元</text>
		 </view>
		 </view>
		
			 
		<view class="cu_item_one animation-slide-bottom" :style="[{animationDelay: '0.1s'}]" >
			<view class="content">
			   <text class="">
				 建设规模和内容</text>
				</view>
				<view class="action">
				<text class="text-grey" style="width: calc(100% - 133px);">　
				{{czProjectInfo.buildScale}}
				</text>
			</view>
			</view>	
			
			   <view class="cu_item_one animation-slide-bottom" :style="[{animationDelay: '0.1s'}]" >
					<view class="content">
					  <text class="">
						本年度建设目标</text>
						</view>
						<view class="action">
						<text class="text-grey" style="">
							　{{czProjectInfo.buildTarget}}
							</text>
					</view>
					</view>	
					<view class="cutLine"></view>
					<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.1s'}]">
								<view class="content">
								<text class="">
								 年度计划投资</text>
								</view>
								<view class="action">
								<text class="text-grey">　　{{czProjectInfo.planInvestment}}亿元</text>
							 </view>
							 </view>
							 
							 <view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.1s'}]">
							 			<view class="content">
							 			<text class="">
							 			   是否开工</text>
							 			</view>
							 			<view class="action">
							 			<text class="text-grey">　{{czProjectInfo.isOpenWork=="1"?"是":"否"}}</text>
							 		 </view>
							 		 </view>
							 	<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.1s'}]">
							 				<view class="content">
							 				<text class="">
							 				   是否竣工</text>
							 				</view>
							 				<view class="action">
							 				<text class="text-grey">　{{czProjectInfo.isCompleted=="1"?"是":"否"}}</text>
							 			 </view>
							 			 </view>
		<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.1s'}]">
					<view class="content">
					<text class="">
					  本年累计完成投资</text>
					</view>
					<view class="action">
					<text class="text-grey">　　{{czProjectInfo.monthCumulativeInvestment}}亿元</text>
				 </view>
				 </view>
			<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.1s'}]">
						<view class="content">
						<text class="">
						   投资完成率</text>
						</view>
						<view class="action">
						<text class="text-grey">　{{czProjectInfo.rate}}%</text>
					 </view>
					 </view>		
			<view class="cu_item_one animation-slide-bottom" :style="[{animationDelay: '0.1s'}]" >
								<view class="content">
								  <text class="">
									  项目进展情况</text>
									</view>
									<view class="action">
									<text class="text-grey" style="">
										　{{czProjectInfo.monthProgress}}
										</text>
								</view>
								</view>
									
		</view>
			
</template>

<script>
import api from '@/api/api.js';
export default {
	data() {
		return {
			btnnum: 0,
			czProjectInfo: {},
			imageSlider: [],
			projectId: ''
		};
	},
	methods: {
		onLoad(e) {
			console.log(e);
			let projectId = e.projectId;
			this.loadProjectInfo(projectId);
		},
		/**
		 * 加载项目信息
		 * @param projectId
		 */
		loadProjectInfo(projectId) {
			this.$http
				.get('/project/v1/cztinfo.do?projectId='+projectId, {
					//params: { id: this.projectId }
				})
				.then(res => {
					console.log(res);
					this.czProjectInfo = res.data;
					var newArr =res.data.photos;										
					this.imageSlider = newArr;
				});
		},
		
	}
};
</script>

<style>
.cu-custom .cu-bar {
	background-color: #fff;
}
.content {
	flex-wrap: wrap;
	color: #0B121A;
	font-size: 17px;
}
.uni-ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.adressText{
	width: 70%;
	font-size:15px;
	line-height: 40px;
	text-align: right;
}
.title {
	line-height: 2em;
	font-weight: 700;
	font-size: 38upx;
}
.projName{
	text-align: right;
	width: 70%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.art-content {
	line-height: 2em;
}
.text-grey{
	color: #4D4D4D;
	font-size: 15px;
	line-height: 25px;
}
.cutLine {
	width: 100%;
	height: 10px;
	background-color: #f5f6f7;
}
swiper swiper-item image{
	border-radius: 10px;
}
/* 将三个内容view的display设置为none(隐藏) */
.end-title {
	display: flex;
	line-height: 44px;
	background-color: #fff;
}
.end-title view {
	font-size: 18px;
	color: #b7b7b7;
	flex-grow: 1;
	text-align: center;
	position: relative;
}
.end-cont {
	display: none;
	background: #c8c7cc;
}

.end-title .btna {
	color: #2a2a2a;
	font-size: 18px;
	/* border-bottom:solid #00A0FF 1px; */
}
.blueShortLine {
	width: 26px;
	height: 4px;
	background-color: #27a9ff;
	position: absolute;
	top: 40px;
	left: 75px;
	border-radius: 25px;
}
.dis {
	display: block;
}
.cameraFont {
	width: 17px;
	height: 16px;
}
.cu-item{
	width: 100%;
	height: 40px;
	line-height: 40px;
	display: flex;
	justify-content: space-between;
	padding: 0 20px;
}
.cu-list.menu > .cu-item .content {
	color: #0b121a;
	font-size: 16px;
}
.action {
	color: #4d4d4d;
	font-size: 14px;
}
.cu_item_one {
	width: 100%;
	display: block;
	padding: 0px 20px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.cu_item_one .action{
	margin-top: 10px;
}
</style>
